<template>
  <div class="product-section">
    <div class="section-header">
      <h2>{{ title }}</h2>
      <el-button type="primary" link @click="goToProductList">
        查看更多
        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </div>
    <div class="product-grid">
      <ProductCard v-for="product in products" :key="product.id" :product="product" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import ProductCard from '@/components/business/ProductCard.vue'
import type { Product } from '@/types'
import { ArrowRight } from '@element-plus/icons-vue'

const props = defineProps<{
  title: string
  products: Product[]
  type: 'hot' | 'new'
}>()

const router = useRouter()

const goToProductList = () => {
  router.push({ path: '/products', query: { type: props.type } })
}
</script>

<style scoped>
.product-section {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.section-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
</style>
